<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>平台广告-添加广告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="网站描述"/>
    <meta name="keywords" content=""/>
    <meta name="author" content="wangl"/>
    <link rel="icon" href="http://ow9lg82yy.bkt.clouddn.com/24f5c360-485d-4a6d-9468-2a61c353cf37.ico">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
        .layui-form-item .layui-inline {
            width: 33.333%;
            float: left;
            margin-right: 0;
        }

        @media (max-width: 1240px) {
            .layui-form-item .layui-inline {
                width: 100%;
                float: none;
            }
        }

        .layui-form-item .role-box {
            position: relative;
        }

        .layui-form-item .role-box .jq-role-inline {
            height: 100%;
            overflow: auto;
        }

        /***
        *  ztree 图标变成黄色
        */
        .ztree .line {
            line-height: 0;
            border-top: none;
            float: none;
        }

        .ztree li span.button.ico_docu {
            background-position: -110px 0;
            margin-right: 2px;
            vertical-align: top;
        }

        .multiSelect {
            line-height: normal;
            height: auto;
            padding: 4px 10px;
            overflow: hidden;
            min-height: 38px;
            margin-top: -38px;
            left: 0;
            z-index: 99;
            position: relative;
            background: none;
        }

        .multiSelect a {
            padding: 2px 5px;
            background: #908e8e;
            border-radius: 2px;
            color: #fff;
            display: block;
            line-height: 20px;
            height: 20px;
            margin: 2px 5px 2px 0;
            float: left;
        }

        .multiSelect a span {
            float: left;
        }

        .multiSelect a i {
            float: left;
            display: block;
            margin: 2px 0 0 2px;
            border-radius: 2px;
            width: 8px;
            height: 8px;
            background: url(/static/images/close.png) no-repeat center;
            background-size: 65%;
            padding: 4px;
        }

        .multiSelect a i:hover {
            background-color: #545556;
        }

        .layui-field-box a {
            padding: 2px 5px;
            background: #908e8e;
            border-radius: 2px;
            color: #fff;
            display: block;
            line-height: 20px;
            height: 20px;
            margin: 2px 5px 22px 0;
            float: left;
        }

        .layui-field-box a span {
            float: left;
        }

        .boxadd {
            float: left;
            display: block;
            margin: 2px 0 0 2px;
            border-radius: 2px;
            width: 8px;
            height: 8px;
            background-size: 65%;
            padding: 4px;
        }

        .input-type label {
            display: inline-block;
            margin-right: 30px;
            margin-top: 8px;
        }
    </style>
</head>
<body class="childrenBody">
<input type="hidden" id="radioValue" name="radioValue" value="1"/>

<div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block input-type">
        <label><input type="radio" name="adType" value="1" title="" checked="checked"/>外部链接</label>
        <label><input type="radio" name="adType" value="2" title=""/>添加单页</label>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">链接</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" id="adLink" name="adLink" placeholder="请输入链接">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">上下架时间</label>
    <div class="layui-input-block">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="startTimeInput" name="startTime" placeholder="上架时间">
        </div>

        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="endTimeInput" name="endTime" placeholder="下架时间">
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">显示图片</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <input type="file" id="adPictureFileInput" name="file">
            <input type="hidden" id="adPictureObjectNameInput" name="adPicture">
            <button type="button" onclick="uploadAdPicture()" class="layui-btn" id="test_showPic">上传显示图片
            </button>
            <div class="layui-upload-list" style="height: 100px;width: 100px;">
                <img class="layui-upload-img" style="height: 100px;width: 100px;" id="demo_showPic">
                <p id="adPicture"></p>
            </div>
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
        <input type="text" class="layui-input" id="adName" name="adName" placeholder="请输入名称"/>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">权重</label>
    <div class="layui-input-block">
        <input type="number" class="layui-input" id="adWeight" name="adWeight" placeholder="请输入权重"/>
    </div>
</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="button" class="layui-btn" onclick="add()">立即提交</button>
        <#--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript">

    function add() {
        // alert($("#adPictureObjectNameInput").val());
        $.ajax({
                url: "/back/content/ad/add",
                type: "post",
                data: {
                    adType: $("#radioValue").val(),
                    adLink: $("#adLink").val(),
                    adPicture: $("#adPictureObjectNameInput").val(),
                    startTime: $("#startTimeInput").val(),
                    endTime: $("#endTimeInput").val(),
                    adName: $("#adName").val(),
                    adWeight: $("#adWeight").val()
                },
                success: function (data) {
                    alert(data.data);
                    window.location.href = "/back/content/ad/listpage";
                }
            }
        );
    }

    function uploadAdPicture() {
        var formData = new FormData();
        formData.append("file", document.getElementById("adPictureFileInput").files[0]);
        $.ajax({
                // url: "/back/content/ad/picture/upload",//改成上传到本地服务器
                url: "/back/content/ad/picture/upload",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    $("#demo_showPic").attr("src", data.data.url);
                    $("#adPictureObjectNameInput").val(data.data.s);
                }
            }
        );
    }

    layui.use(['form', 'jquery', 'layer', 'upload', 'laydate'], function () {
        var form = layui.form,
            $ = layui.jquery,
            upload = layui.upload,
            E = window.wangEditor,
            laydate = layui.laydate,
            imageIndex,
            layer = layui.layer,
            zTreeObj,
            setting = {
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        $("#channelNameShow").val(treeNode.name);
                        $("input[name='channelId']").val(treeNode.id);
                    }
                }
            },
            zTreeObj = 1;

        layui.use('form', function () {
            var form = layui.form;
            form.on('radio', function (data) {
                if (data.value == 1) {
                    $("#adLink").attr("placeholder", "请输入外部链接");
                } else if (data.value == 2) {
                    $("#adLink").attr("placeholder", "请输入单页内部链接");
                }
                $("#radioValue").val(data.value);
            });
        });
        //普通图片上传
        var adPicture = upload.render({
            elem: '#adPicture',
            url: '/file/upload/',
            field: 'test',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#adPicture').attr('src', result); //图片链接（base64）
                });
                imageIndex = layer.load(2, {
                    shade: [0.3, '#333']
                });
            },
            done: function (res) {
                layer.close(imageIndex);
                //如果上传失败
                if (res.success === false) {
                    return layer.msg('上传失败');
                }
                $("#showPic").val(res.data.url);
            },
            error: function () {
                layer.close(imageIndex);
                //演示失败状态，并实现重传
                var demoText = $('#demoText_showPic');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    adPicture.upload();
                });
            }
        });

        var content_editor = new E('#anContent');
        autoConfigWangEditor(content_editor, "adAnContent");

        var anContentInput = $("#anContent");
        // content_editor.customConfig.onchange = function (html) {
        //     // html 即编辑器中的内容
        //     // console.log("123"+html);
        //     anContentInput.val(getHead() + html + getTail());
        // };

        content_editor.create();

        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(*)', function (data) {
            });
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTimeInput', //指定元素
                type: 'datetime'
            });
            laydate.render({
                elem: '#endTimeInput', //指定元素
                type: 'datetime'
            });
        });

    });
</script>
</body>
</html>